<template>
	<view class="details_item bg_color pdd_bottom2" v-if="!isEnter && !isDelete">
			<view class="tit">
				<view class="text">个人信息</view>
			</view>
			<Details :detalisData="userInfo" :detalisList="detalisList">
				<template #data="{ data }">
					<view class="contentTitle">
					<view class="touxiangs">
						<image style="width: 128rpx; height: 128rpx; margin-right: 16rpx; border-radius: 50%" :src="userInfo.portraitUrl" mode="aspectFill"></image>
						<view>
							<view class="titles">{{ userInfo.name }}</view>
							<view class="flex_center" v-if="type == 1">
								<image style="width: 48rpx; height: 48rpx; border-radius: 50%;margin-right: 8rpx;" :src="ziDian.find((i) => i.id == userInfo.country).countryUrl" mode=""></image>
								<view class="kuang font28">
									{{ ziDian.find((i) => i.id == userInfo.country)?.countryName }}
								</view>
							</view>
							<view class="flex_center" style="color: #909090; font-size: 28rpx">
								<view v-if="userInfo.sex == 1">男</view>
								<view v-if="userInfo.sex == 2">女</view>
								<view style="margin: 0 20rpx">{{ userInfo.age ? userInfo.age + '岁' : '' }}</view>
								<view>{{ userInfo.nationals_dictText }}</view>
							</view>
						</view>
					</view>
					</view>
				</template>	
			</Details>
		<template v-if="type == 0">
			<view class="tit">
				<view class="text">证件信息</view>
			</view>
			<Details :detalisData="userInfo" :detalisList="detalisList1"></Details>
		</template>
		<template v-if="userInfo.occupation || userInfo.occupationType">
			<view class="tit">
				<view class="text">工作信息</view>
			</view>
			<Details :detalisData="userInfo" :detalisList="detalisList2"></Details>
		</template>
		<template v-if="type == 0">
			<view class="tit">
				<view class="text">户籍/地址信息</view>
			</view>
			<Details :detalisData="userInfo" :detalisList="detalisList3">
				<template #data="{ data }">
					<view class="font28" style="color: #222222">{{ data.data == 1 ? '是' : '否' }}</view>
				</template>
			</Details>
		</template>
		<template v-if="type == 1">
			<view class="tit">
				<view class="text">身份签证信息</view>
			</view>
			<Details :detalisData="userInfo" :detalisList="detalisList4"></Details>
		</template>
		<template v-if="type == 1 && (userInfo.inviteName || userInfo.invitePhone || userInfo.inviteCard)">
			<view class="tit">
				<view class="text">提供者信息</view>
			</view>
			<Details :detalisData="userInfo" :detalisList="detalisList5"></Details>
		</template>
		<template v-if="type == 1 && userInfo.remark">
			<view class="tit">
				<view class="text">备注</view>
			</view>
			<Details :detalisData="userInfo" :detalisList="detalisList6"></Details>
		</template>
		<view class="tit" v-if="userInfo.reportStatus == 1 || (store.isFuJing() && !store.isMe(userInfo.userId))">
			<view class="text">核查结果</view>
			<view class="xing" v-if="!userInfo.reportStatus">*</view>
		</view>
		<Form
			v-if="userInfo.reportStatus == 0 && store.isFuJing() && !store.isMe(userInfo.userId)"
			ref="formRefs"
			:formList="type == 0 ? formList : formList2"
			:formData="formData"
		></Form>
		<Details
			v-if="userInfo.verifyInfos && userInfo.reportStatus == 1"
			:detalisData="userInfo.verifyInfos"
			:detalisList="
				formListRes.map((item) => {
					return {
						label: item.label,
						field: item.prop,
						slot: item.prop == 'verifierStatus'
					};
				})
			"
		>
			<template #data="{ data }">
				<view :class="{ red: data.data == 1, green: data.data == 2, blue: data.data == 3 }" class="state_view">
					<view class="drop"></view>
					<view class="state font28">
						{{
							formList.find((item) => item.prop == data.field).columns.find((i) => i.value == data.data).name == '上报'
								? '已上报'
								: formList.find((item) => item.prop == data.field).columns.find((i) => i.value == data.data).name
						}}
					</view>
				</view>
			</template>
		</Details>
		<ButtonFc :detalisData="userInfo" @shangbao="shangbao" @edit="edit" @deleteItem="(deleteShow = true), (deleteId = userInfo.id)"></ButtonFc>
	</view>
	<DeleteState v-if="isDelete" :success="success1" @successReturn="fanhui" @failReturn="isDelete = false"></DeleteState>
	<SubmitState v-if="isEnter" :success="success" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
	<DeleteModal :deleteShow="deleteShow" @confirm="confirm" @close="deleteShow = false"></DeleteModal>
</template>
<script></script>
<script setup>
import config from '@/config.js';
import Details from 'com/Details.vue';
import ButtonFc from 'com/ButtonFc.vue';
import DeleteModal from 'com/modal/DeleteModal.vue';
import DeleteState from 'com/modal/DeleteState.vue';
import Form from 'com/Form.vue';
import SubmitState from 'com/modal/SubmitState.vue';
import dayjs from 'dayjs';
const formRefs = ref();
import { formList, formList2, detalisList,detalisList1, detalisList2, detalisList3, detalisList4, detalisList5, detalisList6 } from './detailsData.js';
import { useDetails } from 'hooks';
const success = ref('');
const isEnter = ref(false);
const isDelete = ref(false);
const success1 = ref('');
const type = ref();
const formListRes = ref([]);
const ziDian = ref([])
const init = async (currentPage) => {
	const res3 = await store1.getDict('country');
	ziDian.value = res3;
	type.value = currentPage.options.type;
	formListRes.value = currentPage.options.type == 0 ? formList : formList2;
	let res 
	if(type.value == 0){
		res = await api.queryById('domesticPopulation',{
			id: currentPage.options.id
		});
	}else{
		res = await api.queryById('overseasPopulation',{
			id: currentPage.options.id
		});
	}
	setTittle('核查实有人口', '实有人口详情', res.reportStatus == 0)
	userInfo.value = res;
};
const { store,api, fanhui, store1,setTittle } = useDetails(init)
const shangbao = () => {
	formRefs.value.submit(async () => {
		formData.value.eventId = userInfo.value.id;
		const res = await api.report('domesticPopulation',{
			...formData.value
		});
		isEnter.value = true;
		success.value = res;
	});
};
const userInfo = ref({});
const formData = ref({
	eventId: '', //事件ID
	situationDescription: '', //情况描述
	verifierDate: dayjs().format('YYYY-MM-DD HH:mm'), //核实时间
	verifierName: store.users.username, //核实人名称
	verifierPhone: store.users.phone, //核实人电话
	verifierStatus: '', //核查状态
	verifierUnit: store.users.workAddress //核实人单位
});
const deleteShow = ref(false);
const deleteId = ref('');
const confirm = async () => {
	deleteShow.value = false;
	const res = await api.deleteData('domesticPopulation',{
		type: type.value,
		id: deleteId.value
	});
	isDelete.value = true;
	success1.value = res;
};

const edit = (id) => {
	const url = '/actual/add/' + (type.value == 0 ? 'abroad' : 'domestic') + '?id=' + id;
	uni.navigateTo({ url });
};
</script>

<style lang="scss" scoped>
.contentTitle {
	
	.titles {
		font-family: SourceHanSansTC, SourceHanSansTC;
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
	}
	.touxiangs {
		display: flex;
		align-items: center;
	}
	.flex_centers {
		display: flex;
		align-items: center;
		margin: 32rpx 0;
	}
	.text {
		font-family: SourceHanSansTC, SourceHanSansTC;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
	}
}
.contentTitles {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 0 32rpx 32rpx 32rpx;
	.titles {
		font-family: SourceHanSansTC, SourceHanSansTC;
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
	}
	.touxiangs {
		display: flex;
		align-items: center;
	}
	.flex_centers {
		display: flex;
		align-items: center;
		margin: 32rpx 0;
	}
	.text {
		font-family: SourceHanSansTC, SourceHanSansTC;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
	}
}
</style>
